import { Button } from "antd";
import { useEffect, useState } from "react";

import { get, post } from "@/utils/request";
import { useClientLoaderData } from "umi";

// import "./index.less";
// css是可以直接使用模块化的
import styles from "./index.less";

interface ItemType {
  id: number;
  name: string;
  cname: string;
  [propname: string]: any;
}

const DocsPage = () => {
  const [list, setList] = useState([]);

  const { data } = useClientLoaderData();

  console.log(data);

  useEffect(() => {
    setList(data.data.list);
  }, []);

  // useEffect(() => {
  //   get("/api/users").then((res) => {
  //     setList(res.data.list);
  //   });
  // }, []);

  const remove = (id: number) => () => {
    post("/api/users/del", { id }).then((res) => {
      if (res.success === 1) {
        get("/api/users").then((res) => {
          setList(res.data.list);
        });
      }
    });
  };

  return (
    <div className="docs">
      <p>This is umi docs.</p>
      <Button>按钮</Button>

      <ul>
        {list.map((item: ItemType) => {
          return (
            <li key={item.id} className={styles.li}>
              {item.id} - {item.cname} - {item.name} -{" "}
              <Button danger onClick={remove(item.id)}>
                删除
              </Button>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export async function clientLoader() {
  const res = await get("/api/users");
  return res;
}

export default DocsPage;
